[최일우] sprint1 #1
Conversation
|
스프리트 미션 하시느라 수고 많으셨어요. |
|
PR 본문은 다음과 같이 작성해볼 수 있겠군요 😉: 기본
심화
|
There was a problem hiding this comment.
벡터 이미지는 svg로 저장하시는걸 추천드려요 !
이하 MDN
SVG(Scalable Vector Graphics)는 2차원 벡터 그래픽을 서술하는XML기반의 마크업 언어입니다.SVG는 텍스트 기반의 열린 웹 표준 중 하나로, 모든 사이즈에서 깔끔하게 렌더링 되는 이미지를 서술하며 CSS, DOM, JavaScript, SMIL (en-US) 등 다른 웹 표준과도 잘 동작하도록 설계됐습니다. SVG는 달리 말하자면 HTML과 텍스트의 관계를 그래픽에 적용한 것입니다
이미지 파일은 최소 단위가 픽셀로 되어있으며 확대했을 때 이미지가 깨질 수 있어요 !
피그마에서 export하실 때에 svg로 export할 수 있습니다 😊
There was a problem hiding this comment.
확인했습니다 png가 아닌 svg로 export 하겠습니다
| </div> | ||
| </header> | ||
| <main> | ||
| <section class="section1"> |
There was a problem hiding this comment.
크으 ~ 시맨틱을 고려하셨군요 !
div로 하고 넘어갈 수도 있었을텐데, section으로 작성하셨군요 👍👍
| <a class="login-button" href="/login/">로그인</a> | ||
| </div> | ||
| </header> | ||
| <main> |
There was a problem hiding this comment.
훌륭합니다 ! 문서의 핵심이 되는 곳에 main을 적절히 넣으셨군요 👍
그냥 놓칠 수도 있었을텐데, 훌륭합니다 👍👍
| <h3>Hot item</h3> | ||
| <h2> | ||
| 인기 상품을<br /> | ||
| 확인해 보세요 | ||
| </h2> |
There was a problem hiding this comment.
h 태그는 순차적으로 기입하는 것을 권장드립니다 !
h1 다음은 h2. 그리고 h3...
이런식으로 순차적으로 기입할 것을 MDN에서 권장하고 있습니다. 😊
MDN: 제목 단계를 건너뛰는 것을 피하세요. 언제나
<h1>로 시작해서,<h2>, 순차적으로 기입하세요.
| <div class="footer-container-end"> | ||
| <a href="https://www.facebook.com/?locale=ko_KR" target="_blank" | ||
| ><img src="/images/ic_facebook.png" | ||
| /></a> | ||
| <a href="https://x.com/?lang=ko" target="_blank" | ||
| ><img src="/images/ic_twitter.png" | ||
| /></a> | ||
| <a href="https://www.youtube.com/" target="_blank" | ||
| ><img src="/images/ic_youtube.png" | ||
| /></a> | ||
| <a href="https://www.instagram.com/" target="_blank" | ||
| ><img src="/images/ic_instagram.png" | ||
| /></a> | ||
| </div> |
There was a problem hiding this comment.
(제안/선택)요소들이 순서 없는 목록을 의미한다면 <ul>과 <li>로도 나타낼 수 있습니다 !
<ul class="footer-social">
<li>
<a target="_blank" href="https://www.facebook.com/">
<img src="images/ic_facebook.svg" alt="페이스북" />
</a>
</li>
<li>
<a target="_blank" href="https://www.twitter.com/">
<img src="images/ic_twitter.svg" alt="트위터" />
</a>
</li>
<li>
<a target="_blank" href="https://www.youtube.com/">
<img src="images/ic_youtube.svg" alt="유튜브" />
</a>
</li>
<li>
<a target="_blank" href="https://www.instagram.com/">
<img src="images/ic_instagram.svg" alt="인스타그램" />
</a>
<li>
</ul>MDN: HTML
<ul>요소는 정렬되지 않은 목록을 나타냅니다. 보통 불릿으로 표현합니다.
li 태그의 기본 스타일을 제거하고 싶다면 다음과 같이 작성할 수 있습니다 ! { list-style: none; }
| 판다마켓 중고 거래 | ||
| </h2> | ||
| </div> | ||
| <img src="/images/Img_home_bottom.png" /> |
There was a problem hiding this comment.
alt를 작성해볼까요?
alt는 스크린 리더 사용자에 대한 보조 텍스트가 될 수 있으므로 "어떠한 이미지 인지"를 작성해주는 것이 좋아요 !
alt의 목적
- 인터넷 연결이 끊겼을 때 대체되는 이미지
- 스크린 리더 사용자를 위한 대체 텍스트
- 이미지를 볼 수 없는 환경에서 이미지를 대체하기 위한 텍스트
등 목적을 알게 된다면 alt를 어떻게 사용하시면 될지 알 수 있을 것 같아요.
다음은 하버드 에듀케이션에서 제안하는 alt 규칙입니다:
tl;dr
- Write Good Alt Text
- Add alt text all non-decorative images.
- Keep it short and descriptive, like a tweet.
- Don’t include “image of” or “photo of”.
- Leave alt text blank if the image is purely decorative
- It's not necessary to add text in the Title field.
|
수고하셨습니다 일우님 ~! 다음에는 배포까지 해보고 웹 상에 직접 띄워보시는 것도 좋을 것 같아요 !
|
2 participants
요구사항
기본
심화
주요 변경사항
스크린샷
주강사님에게
-궁금한거 모두 dm으로 질문 드렸습니다!